<template>
  <div class="user-index-main">
    <div class="title">
      <el-image
        src="https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/title.png"
        style="width: 1400px; height: 130px"
      ></el-image>
    </div>

    <div class="public-main">
      <el-container class="el-container">
        <el-aside width="200px" style="border-radius: 8px">
          <div class="emum-title-text">个人中心</div>
          <el-menu
            background-color="rgb(245,245,245)"
            active-text-color="#ffffff"
            :default-active="String(isActive)"
            class="menu-aside"
          >
            <el-menu-item
              :class="{
                'menu-item-active': index === isActive,
                'menu-item': index !== isActive,
              }"
              v-for="(item, index) in emumList"
              :key="item"
              :index="String(index)"
              @click="getRoute(index)"
            >
              <span
                :class="[
                  'icon-' + index + (index === isActive ? '-active' : ''),
                  'security-icon',
                ]"
              ></span>
              <div>{{ item }}</div>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div>
            <div class="el-main-text">| {{ activeName }}</div>
            <el-divider class="hr" />
          </div>
          <router-view />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserIndex',
  data() {
    return {
      emumList: [
        '我的信息',
        '我的头像',
        '我的消息',
        '我的收藏',
        '我的记录',
        '修改密码',
        '发布视频',
      ],
    }
  },

  computed: {
    isActive() {
      return this.$route.meta.index
    },
    activeName() {
      return this.emumList[this.isActive]
    },
  },

  methods: {
    getRoute(id) {
      this.isActive = id
      this.activeName = this.emumList[this.isActive]
      if (id === 0) {
        this.$router.push('/user-index/user-info')
      } else if (id === 1) {
        this.$router.push('/user-index/user-avatar')
      } else if (id === 2) {
        this.$router.push('/user-index/user-message')
      } else if (id === 3) {
        this.$router.push('/user-index/user-cart')
      } else if (id === 4) {
        this.$router.push('/user-index/user-recode')
      } else if (id === 5) {
        this.$router.push('/user-index/user-pass')
      } else if (id === 6) {
        this.$router.push('/user-index/publish-video')
      }
    },
  },
}
</script>

<style scoped>
.user-index-main {
  width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
}
.public-main {
  width: 1200px;
  display: flex;
  border: 1px solid rgb(245, 245, 245);
  border-radius: 8px;
  box-shadow: 2px 2px 2px rgb(245, 245, 245);
}
.el-container {
  background-color: white;
  height: 800px;
}
.menu-aside {
  height: 93%;
}
.emum-title-text {
  height: 7%;
  width: 200px;
  font-size: 15px;
  border: 1px solid #efefef;
  background-color: rgb(245, 245, 245);
  text-align: center;
  color: #7d8577;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #cdcdcd;
  border-right: 1px solid #cdcdcd91;
  box-sizing: border-box;
}
.el-main-text {
  color: #00a1d7;
}
.menu-item-active {
  background-color: #00a1d7 !important;
}

.menu-item {
  background-color: rgb(245, 245, 245);
}

.icon-0 {
  width: 36px;
  height: 36px;
  margin-top: 10px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/1.png');
  background-repeat: repeat-x;
}

.icon-0-active {
  width: 36px;
  height: 36px;
  margin-top: 10px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/01.png');
  background-repeat: repeat-x;
}

.icon-1 {
  width: 36px;
  height: 36px;
  margin-top: 5px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/2.png');
  background-repeat: repeat-x;
}

.icon-1-active {
  width: 34px;
  height: 36px;
  margin-top: 5px;
  margin-right: 2px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/02.png');
  background-repeat: repeat-x;
}
.icon-2 {
  width: 35px;
  height: 36px;
  margin-top: 5px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/3.png');
  background-repeat: repeat-x;
}
.icon-2-active {
  width: 35px;
  height: 36px;
  margin-top: 5px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/03.png');
  background-repeat: repeat-x;
}
.icon-3 {
  width: 36px;
  height: 36px;
  margin-top: 6px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/4.png');
  background-repeat: repeat-x;
}
.icon-3-active {
  width: 36px;
  height: 36px;
  margin-top: 6px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/04.png');
  background-repeat: repeat-x;
}
.icon-4 {
  width: 36px;
  height: 36px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/5.png');
  background-repeat: repeat-x;
}
.icon-4-active {
  width: 34px;
  height: 36px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/05.png');
  background-repeat: repeat-x;
}

.icon-5 {
  width: 36px;
  height: 32px;
  margin-top: 10px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/7.png');
  background-repeat: repeat-x;
}
.icon-5-active {
  width: 32px;
  height: 36px;
  margin-top: 10px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/07.png');
  background-repeat: repeat-x;
}

.icon-6 {
  width: 33px;
  height: 36px;
  margin-right: 1px;
  margin-top: 5px;
  background-image: url('https://srb-file-20220319.oss-cn-beijing.aliyuncs.com/6.png');
  background-repeat: repeat-x;
}
.icon-6-active {
  width: 33px;
  height: 36px;
  margin-right: 1px;
  margin-top: 5px;
  background-image: url('https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/vcd/06.png');
  background-repeat: repeat-x;
}
</style>
